getToken()


getData()
async function getData() {
    const res = await axios({
        url: '/student/list',
    })
    console.log(res);


    // 获取姓名数组
    const names = res.data.data.map((v) => v.name);
    // 获取期望薪资数组
    const salaries = res.data.data.map((v) => v.salary);

    // 获取实际薪资数组
    const trueSalaries = res.data.data.map((v) => v.truesalary);
    // 籍贯和对应人数
    const hometownList = [];
    res.data.data.forEach((item) => {
        //  1 判断 item对应省份数据 有没有在hometownList中定义过
        const index = hometownList.findIndex((v) => v.name === item.province);
        //  2   没有定义过 - 给 hometownList 添加一个新的元素  {name:item.province,value:1}
        if (index === -1) {
            hometownList.push({ value: 1, name: item.province });
        } else {
            //  3 定义过    找到 item.province  对应 数据在数组的哪个位置 hometownList[index].value++
            hometownList[index].value++;
        }
    });



    // 接收数据来渲染薪资折线图
    renderSalary(names, salaries, trueSalaries);
    renderHomeTown(hometownList);
}
// 接收数据来渲染薪资折线图
function renderSalary(names, salaries, trueSalaries) {
    const myChart = echarts.init(document.querySelector(".line"));

    // 指定图表的配置项和数据
    const option = {
        color: ["aqua", "pink"],
        title: {
            text: "薪资折线图",
        },
        tooltip: {
            trigger: "axis",
        },
        legend: {},
        // 拖动 类似滚动条
        dataZoom: [
            // {
            //   type: "inside",
            //   start: 0,
            //   end: 10,
            // },
            {
                // 滑块开始的位置
                start: 20,
                // 滑块结束位置
                end: 50,
            },
        ],
        // 工具箱
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: names, // 姓名数组
        },
        yAxis: {
            type: "value",
            axisLabel: {
                formatter: "{value}",
            }
        },
        series: [
            {
                name: "Highest",
                type: "line",
                data: salaries, // 期望薪资
                // 平滑
                smooth: true,
                // 设置图例 实心圆
                symbol: "circle",
                // color: "red",
            },
            {
                name: "Lowest",
                type: "line",
                data: trueSalaries, // 真实薪资
                // 平滑
                smooth: true,
                // 设置图例 实心圆
                symbol: "circle",
                // color: "blue",
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 接收数据来渲染籍贯饼图
}
function renderHomeTown(hometownList) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector(".pie"));

    // 指定图表的配置项和数据
    const option = {
        title: {
            text: "籍贯 hometown",
        },
        series: [
            {
                name: "Nightingale Chart",
                type: "pie",
                radius: [30, 150],
                center: ["50%", "50%"],
                roseType: "area",
                itemStyle: {
                    borderRadius: 8,
                },
                data: hometownList, // 自己处理过的数据
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}